<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">年度巡查数量趋势</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class="body" ref="bodyRef">
            <VChart ref="chartRef" :option="mapOptions" :style="{ height: height }"/>
        </div>
    </BoxBorder13>

</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import VChart from "vue-echarts";
import {useTemplateRef} from "vue";
import {use} from "echarts";
import {GridComponent, TooltipComponent} from "echarts/components";
import {BarChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import * as echarts from "echarts/core";
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getSendPoliceTrendOfXcMain} from "@/api/StatisticAnalysis/XCTotal.js";
import dayjs from "dayjs";

const currentDay = dayjs().format('YYYY-MM-DD')

const entries = Array.from({length: 12}, (_, i) => 0);
const total = ref([...entries])
const questionable = ref([...entries]);

const bodyRef = useTemplateRef('bodyRef')
const height = ref('')

const deptId = ref(0)
const mapOptions = ref({})

use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]);

let intervalId;

onMounted(() => {
    nextTick(() => {
        height.value = bodyRef.value.clientHeight
    });

    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);
})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})


// 获取数据
const getData = async () => {
    const res = await getSendPoliceTrendOfXcMain({
        unitId: deptId.value,
        endYear: currentDay
    });
    const {all, hasProblem} = res.data
    if (all.length > 0) {
        all.forEach(item => {
            total.value[item.months - 1] = item.counts;
        });
    } else {
        total.value = [...entries]
    }

    if (hasProblem.length > 0) {
        hasProblem.forEach(item => {
            questionable.value[item.months - 1] = item.counts;
        });
    } else {
        questionable.value = [...entries]
    }
    setChartOptions(total.value, questionable.value)
}

const changeDeptHandle = (id) => {
    console.log(id)
    getData()
}

const setChartOptions = (thisYear, lastYear) => {
    mapOptions.value = {
        grid: {
            left: 0,
            right: 0,
            top: '11',
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: [
            {
                type: "category",
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#2cf7fe'
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            }
        ],

        yAxis: [
            {
                type: "value",
                splitLine: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#90979c'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#2cf7fe'
                },
                splitArea: {
                    show: false
                }
            }
        ],

        series: [
            {
                name: "巡查总数",
                type: "bar",
                barMaxWidth: 5,
                barGap: "10%",
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    borderRadius: [30, 30, 30, 30],
                    // shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 0,
                },
                data: thisYear,
            },
            {
                name: "不规范数",
                type: "line",
                symbolSize: 9,
                symbol: 'circle',
                itemStyle: {
                    color: '#6be6c1',
                    barBorderRadius: 0,
                    label: {
                        show: false,
                    }
                },
                data: lastYear
            }
        ]
    }
}
</script>

<style scoped lang="scss">

</style>